<template>
  <div class="section-header text-center">
    <h2>Loved by Our Students</h2>
  </div>
  <div class="testimonial__wrapper">
    <div class="testimonial__wrapper">
      <swiper
      class="testimonial__slider3"
        :modules="[Thumbs]"
        :thumbs="{ swiper: thumbsSwiper }"
        :slides-per-view="1"
        :effect="effect"
      >
        <swiper-slide v-for="(item, index) in testimonials" :key="index">
          <div class="row g-5 align-items-center">
            <div class="col-md-6">
              <div class="testimonial__item">
                <div class="testimonial__item-inner">
                  <div class="testimonial__content">
                    <div class="testimonial__writer">
                      <h5>{{ item.name }}</h5>
                      <p>{{ item.name }}</p>
                      <span
                        ><i class="fa-solid fa-star"></i
                        ><i class="fa-solid fa-star"></i
                        ><i class="fa-solid fa-star"></i
                        ><i class="fa-solid fa-star"></i
                        ><i class="fa-solid fa-star"></i
                      ></span>
                    </div>
                    <blockquote class="blockquote">
                      <p>{{ item.quote }}</p>
                    </blockquote>

                    <span class="quote"
                      ><i class="fa-solid fa-quote-right"></i
                    ></span>
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-6">
              <div class="testimonial__item">
                <div class="testimonial__item-inner">
                  <div class="testimonial__thumb">
                    <img :src="item.banner" alt="testimonial" />
                    <div class="testimonial__thumb-playbtn">
                      <VideoModal
                        :link="'https://www.youtube.com/embed/Pf03RTjeISE'"
                      >
                        <template v-slot:button>
                          <a href="javascript:void(0);"
                            ><img
                              src="/images/testimonial/home3/play-btn.png"
                              alt="ply-btn"
                          /></a>
                        </template>
                      </VideoModal>
                      <p>Testimonial by</p>
                      <span>{{ item.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </swiper-slide>
      </swiper>
      <swiper
        class="testimonial__author3 mt-5"
        :modules="[Thumbs]"
        watch-slides-progress
        @swiper="setThumbsSwiper"
        :space-between="24"
        :loop="true"
        :breakpoints="storyBulletsBreakpoints"
      >
        <swiper-slide  v-for="(itm, idx) in testimonials" :key="idx">
          <div class="testimonial__storyteller">
            <div class="testimonial__storyteller-thumb">
              <img :src="itm.thumbnail" alt="storyteller" />
            </div>
            <div class="testimonial__storyteller-content">
              <h6>{{ itm.name }}</h6>
              <p class="mb-0">{{ itm.role }}</p>
            </div>
          </div>
        </swiper-slide>
      </swiper>
    </div>
  </div>
</template>
<script>
import { ref } from "vue";
import { Thumbs } from "swiper";
import { Swiper, SwiperSlide } from "swiper/vue";
import VideoModal from "@/components/base/modals/VideoModal.vue";
export default {
  components: {
    Swiper,
    SwiperSlide,
    VideoModal,
  },
  setup() {
    const thumbsSwiper = ref(null);
    const setThumbsSwiper = (swiper) => {
      thumbsSwiper.value = swiper;
    };
      const effect = "fade";
    return {
      Thumbs,
      thumbsSwiper,
      setThumbsSwiper,
      effect
    };
  },

  props: {
    testimonials: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      storyBulletsBreakpoints: {
        576: {
            slidesPerView: 1,
        },
        768: {
            slidesPerView: 2,
        },
        992: {
            slidesPerView: 3,
            spaceBetween: 15,
        },
        1200: {
            slidesPerView: 4,
            spaceBetween: 24,
        }
    },
    }
  },
};
</script>